<ion-header>
    <ion-navbar>
        <ion-title>{{chartUsername}}</ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <div class="message-wrap">
        <div class="message" *ngFor="let item of messageList" [ngClass]="item.userId === chatUserId ? 'left' : 'right'">
            <img [src]="item.userImgUrl" class="user-img">
            <ion-spinner name="dots" *ngIf="item.status === 'pending'"></ion-spinner>
            <div class="msg-detail">
                <div class="msg-info">
                    <p>{{item.username}}&nbsp;{{item.time | relativetime}}</p>
                </div>
                <div class="msg-content">
                    <p class="line-breaker">{{item.message}}</p>
                </div>
            </div>
        </div>
    </div>
</ion-content>
<ion-footer no-border [style.height]="isOpenEmojipicker ? '255px' : '55px'">
    <ion-grid class="input-wrap">
        <ion-row>
            <ion-col col-2>
                <button ion-button clear ion-only item-righ (click)="switchEmojiPicker()">
                    <ion-icon name="md-happy"></ion-icon>
                </button>
            </ion-col>
            <ion-col col-8>
                <ion-textarea #chatInput [(ngModel)]="editorMessage" placeholder="请输入内容" (keyup.enter)="sendMessage()" (focus)="focus()"></ion-textarea>
            </ion-col>
            <ion-col col-2>
                <button ion-button clear ion-only item-righ (click)="sendMessage()">
                    <ion-icon name="ios-send"></ion-icon>
                </button>
            </ion-col>
        </ion-row>
    </ion-grid>
    <emojipicker *ngIf="isOpenEmojipicker" [(ngModel)]="editorMessage"></emojipicker>
</ion-footer>